<template>
  <div class="employees-container">
    <div class="app-container">
      <page-tools>
        <!--
          1.当前组件左右标签结构都不确定，所以用插槽技术解决
          因为有两处不确定，需要给slot取名(添加name属性来区分)
          2.左右内容不一定有需要显示，只有使用组件的时候，给left和right插槽分发了标签，才需要展示内容，这里接住了$solt和v-if指令配合做条件渲染
          知识点:$solts可以获取到组件的所有插槽内容
          3.v-if不能加给类名为left和right的div身上，这样可能会破坏左右布局，影响排版
         -->
        <template #left>
          <span>总记录数: 16 条</span>
        </template>

        <template #right>
          <el-button type="warning" size="small" @click="$router.push('/employees/excel')">excel导入</el-button>
          <el-button type="danger" size="small" @click="handleDownload">下载当前页</el-button>
          <el-button type="danger" size="small" @click="handleDownloadAll">下载所有</el-button>
          <el-button type="primary" size="small" @click="showDialog=true">新增员工</el-button>
        </template>
      </page-tools>

      <el-card style="margin-top: 10px;">
        <el-table border :data="list" stripe>
          <el-table-column label="序号" sortable="" type="index" :index="indexMethod" fixed="left" />
          <el-table-column label="姓名" sortable="" prop="username" />
          <el-table-column label="头像" sortable="">
            <template #default="{row}">
              <!-- v-imgerr错误头像地址指令，在src的directive的index.js中定义的 -->
              <img v-imgerr="bigHeader" :src="row.staffPhoto" alt="" width="80" height="80" @click="handleerweima(row.staffPhoto)">
            </template>
          </el-table-column>
          <el-table-column label="手机号" sortable="" prop="mobile" />
          <el-table-column label="工号" sortable="" prop="workNumber" />
          <el-table-column label="聘用形式" sortable="">
            <template #default="{row}">
              {{ formOfEmployment(row.formOfEmployment) }}
            </template>
          </el-table-column>
          <el-table-column label="部门" sortable="" prop="departmentName" />
          <el-table-column label="入职时间" sortable="" prop="timeOfEntry" />
          <el-table-column label="账户状态" sortable="">
            <template #default="{row}">
              {{ enableState(row.enableState) }}
            </template>
          </el-table-column>
          <el-table-column label="操作" sortable="" fixed="right" width="280">
            <template #default="{row}">
              <el-button type="text" size="small" @click="$router.push(`/employees/detail/${row.id}`)">查看</el-button>
              <el-button type="text" size="small">转正</el-button>
              <el-button type="text" size="small">调岗</el-button>
              <el-button type="text" size="small">离职</el-button>
              <el-button type="text" size="small" @click="handleOpen(row.id)">角色</el-button>
              <el-button type="text" size="small" @click="delEm(row.id)">删除</el-button>
            </template>
          </el-table-column>
        </el-table>
        <!-- 分页组件 -->
        <div style="height: 60px; margin-top: 10px">
          <el-pagination
            layout="total,sizes,prev, pager, next,jumper"
            :total="total"
            :page-size="query.size"
            :current-page="query.page"
            :page-sizes="[3,5,7]"
            @size-change="handleSizeChange"
            @current-change="handleCurrentChanage"
          />
        </div>
        <!-- sync修饰符等同于
           <add-employee :show-dialog="showDialog"
           @update:showDialog="showDialog=$event" />
         -->
        <add-employee :show-dialog.sync="showDialog" @add-emp-suc=" getEmpList" />
        <!-- 分享展示, 预览的二维码的弹层 -->
        <el-dialog title="二维码" :visible="showCodeDialog" @close="closeDialog">
          <el-row type="flex" justify="center">
            <canvas ref="myCanvas" />
          </el-row>
        </el-dialog>
        <!-- 分配角色弹框 -->
        <el-dialog title="分配角色" :visible="isShowshow" @close="closeShowshow">
          <!-- 复选框 -->
          <el-checkbox-group v-model="checkList">
            <!-- 如果没有插槽：两个用途，既是展示的文本，也是提供给v-model用得 -->
            <el-checkbox v-for="item in roleList" :key="item.id" :label="item.id">{{ item.name }}</el-checkbox>
          </el-checkbox-group>
          <template #footer>
            <el-button type="primary" size="small" @click="handleAssign">确定</el-button>
            <el-button size="small" @click="closeShowshow">取消</el-button>
          </template>
        </el-dialog>
      </el-card>
    </div>
  </div>
</template>

<script>
// 导入默认头像地址
import QrCode from 'qrcode'
import bigHeader from '@/assets/common/bigUserHeader.png'
import { getSettingAPI } from '@/api/setting'
import { getRoleInfoAPI } from '@/api/user'
import { empListAPI, delListAPI, assignAPI } from '@/api/employees'
import obj from '@/constant/employees'
import AddEmployee from './compents/add-employee.vue'
import { export_json_to_excel } from '@/vendor/Export2Excel'

// Excel文件的导入和导出
// 导入/上传:把excel文件中的数据读到内存中，读出来就是一个数组。基于数组做列表渲染
export default {
  name: 'EmployeesView',
  components: {
    AddEmployee
  },
  data() {
    return {
      query: {
        page: 1,
        size: 10
      },
      total: 0,
      list: [],
      bigHeader,
      showDialog: false,
      showCodeDialog: false,
      isShowshow: false,
      roleList: [],
      checkList: [],
      id: ''
    }
  },
  created() {
    this.getEmpList()
    this.getRoleList()
  },
  methods: {
    // 点击确定分配角色
    async handleAssign() {
      // 把选中的角色同步到后台
      await assignAPI(this.id, this.checkList)
      // 关闭弹框
      this.closeShowshow()
      // 提示
      this.$message.success('分配角色成功')
    },
    // 获取角色列表
    async getRoleList() {
      const { data } = await getSettingAPI(this.userId)
      this.roleList = data.rows
      console.log(this.roleList)
    },
    // 获取当前角色
    async getEmpList() {
      const { data } = await empListAPI(this.query.page, this.query.size)
      this.total = data.total
      this.list = data.rows
    },
    // 自定义下标规则
    indexMethod(index) {
      // 规则：当前页数据的序号+1+（当前页码-1）*每页条数
      return (this.query.page - 1) * this.query.size + index + 1
    },
    formOfEmployment(formOfEmployment) {
      // switch (formOfEmployment) {
      //   case 1:
      //     return '正式工'
      //   case 2:
      //     return '非正式'
      // }
      // 格式化聘用形式
      // 根据formOfEmployment去hireType中查找
      const item = obj.hireType.find(item => item.id === formOfEmployment)
      // 找到返回value，没有返回未知
      return item ? item.value : '未知'
    },
    enableState(enableState) {
      const item = obj.workingState.find(item => item.id === enableState)
      return item ? item.value : '未知'
    },
    // 每页条数改变时
    handleSizeChange(val) {
      // 选择的条数同步到query.size中
      this.query.size = val
      // 重新获取员工列表
      this.getEmpList()
    },
    // 每页条数改变时
    handleCurrentChanage(val) {
      this.query.page = val
      this.getEmpList()
    },
    // 删除员工
    async delEm(id) {
      await delListAPI(id)
      // 如果当前不是第一页，并且list只有一条数据
      if (this.query.page > 1 && this.list.length === 1) {
        this.query.page--
      }
      this.getEmpList()
    },
    // Excel当前页导出
    handleDownload() {
      // 调用下载excel
      const header = ['姓名', '部门', '手机号', '工号', '聘用形式', '入职日期', '转正日期']
      const zh2enkey = {
        '入职日期': 'timeOfEntry',
        '姓名': 'username',
        '工号': 'workNumber',
        '聘用形式': 'formOfEmployment',
        '部门': 'departmentName',
        '手机号': 'mobile',
        '转正日期': 'correctionTime'
      }
      // 处理list获得二维数组
      const data = this.list.map(item => {
        const arr = []
        header.forEach(zhkey => {
          const enkey = zh2enkey[zhkey]
          if (enkey === 'formOfEmployment') {
            const temp = obj.hireType.find(a => a.id === +item[enkey])
            // 根据当前对象的聘用形式数字，去obj.hireType数组查找
            arr.push(temp ? temp.value : '未知')
          } else {
            arr.push(item[enkey])
          }
        })
        return arr
      })
      // console.log(data)
      export_json_to_excel({
        // 表头
        header,
        // 表体
        data,
        // 文件名
        filename: `${this.$store.state.user.userInfo.companyName}员工列表`
      })
    },
    // Excel全部页导出
    async handleDownloadAll() {
      // 把数据总条数同步到query.size中
      this.query.size = this.total
      // 重置页码
      this.query.page = 1
      // 获取员工列表
      await this.getEmpList()
      // 下载Excel
      this.handleDownload()
    },
    // 点击图片显示二维码
    handleerweima(staffPhoto) {
      if (!staffPhoto) return // 有图片才显示弹层
      this.showCodeDialog = true
      this.$nextTick(() => {
        // 如果这里 url 写的是网址, 就会跳转到对应网址 (二维码分享效果)
        QrCode.toCanvas(this.$refs.myCanvas, staffPhoto)
      })
    },
    // 关闭二维码弹框
    closeDialog() {
      this.showCodeDialog = false
    },
    // 关闭角色分配弹框
    closeShowshow() {
      this.isShowshow = false
    },
    // 分配角色弹框显示
    async handleOpen(id) {
      this.id = id
      this.isShowshow = true
      const { data } = await getRoleInfoAPI(id)
      console.log(data)
      this.checkList = data.roleIds
      console.log(this.checkList)
      console.log(this.roleList)
    }
  }
}
</script>

    <style lang="scss">
.assign-role {
  ::v-deep {
    .el-checkbox {
      font-size: 30px;
    }
  }
}
    </style>

